<template>
	<view>
		<uni-popup ref="modalBox" :maskClick="false" type="center">
			<view class="modal_box-wrap">
				<view class="alert-icon"><image src="../../static/imgs/icons/alert-icon.png" mode=""></image></view>
				<view class="p"><text style="color:#FFAF3C;">失败原因：</text> {{config.content}}</view>
				<view class="btns-wrap">
					<view class="btn cancel" @click="handleCancel">{{config.cancleText}}</view>
					<view class="btn confirm" @click="handleConfirm">{{config.confirmText}}</view>
				</view>
				<uni-icons @click="hide" class="close-icon" type="close" size="30" color="#999"></uni-icons>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			config: {
				type: Object,
				default() {
					return {
						cancleText: '取消订单',
						confirmText: '重新提交',
						content: '是否确认删除？'
					}
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			show() {
				this.$refs.modalBox.open()
			},
			hide() {
				this.$refs.modalBox.close()
			},
			handleConfirm() {
				this.$emit('confirm')
				this.hide()
			},
			handleCancel() {
				this.$emit('cancel')
				this.hide()
			}
		}
	}
</script>

<style lang="scss" scoped>
.modal_box-wrap {
	background-color: #fff;
	width:582rpx;
	border-radius:20rpx;
	padding: 80rpx 60rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	position: relative;
	.alert-icon {
		width: 118rpx;
		height: 138rpx;
	}
	.p {
		padding: 40rpx 0 60rpx;
		font-size: 30rpx;
		line-height: 50rpx;
	}
	.btns-wrap {
		width: 100%;
		display: flex;
		justify-content: space-between;
		.btn {
			width:218rpx;
			height:73rpx;
			line-height: 73rpx;
			text-align: center;
			border-radius:37px;
			font-size: 28rpx;
			&.cancel {
				border:1px solid #ccc;
				color: #ccc;
			}
			&.confirm {
				background-color: $blue;
				color: #fff;
			}
		}
	}
	.close-icon {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		z-index: 2;
	}
}
</style>
